<template>
    <div class="product">
<!--         <Header transparency="transparency"></Header> -->
        <div id="main">
           <nav class="nav">
              <img :src="navImg">
           </nav>
           <div class="productContent">
              <productList></productList>
           </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/header'
import Footer from '@/components/footer'
import productList from '@/components/productList'
import Loading from '@/components/loading'
export default {
  name: "product",
  components:{
      Header,
      Footer,
      productList,
      Loading
  },
  data () {
    return {
        msgFormSon: "this is msg",
        transparency:"rgba(255,255,255,1)",
        url:'/api/medias?location=30',
        navImg:''
    }
  },
  methods: {
      getNavImg () {
         this.$loading(this.$t("contact.loading"));
        let self = this;
        axios.get(self.url)
          .then(function (response) {
             self.closeLoading();
             self.navImg = response.data.data[0].media;
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          })  
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.getNavImg();
  }
};
</script>
<style scoped>
    .nav{width:100%;background:#fff;margin:0px auto;}
    .nav img{width:100%;}
</style>